<template>
  <div>
    <!-- 查询框 -->
    <el-input
      placeholder="请输入商品名称"
      v-model="searchText"
      style="width: 200px; margin-bottom: 20px;">
    </el-input>
    <el-button @click="fetchData" icon="el-icon-search" circle></el-button>

    <!-- 新增按钮 -->
    <el-button type="primary" @click="showCreateDialog" icon="el-icon-plus" style="margin-bottom: 10px;">新增</el-button>

    <!-- 列表展示 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="pid" label="ID" width="50"></el-table-column>
      <el-table-column prop="pname" label="商品名称" width = "200"></el-table-column>
      <el-table-column prop="desciption" label="描述"></el-table-column>
      <el-table-column prop="price" label="价格" width="80"></el-table-column>
      <el-table-column prop="stock" label="库存" width="80"></el-table-column>
      <el-table-column prop="cid" label="商品分类编号" width="120"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="showEditDialog(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="confirmDelete(scope.row.pid)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增和修改的对话框 -->
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      <el-form :model="productForm">
        <el-form-item label="商品名称" label-width="100px">
          <el-input v-model="productForm.pname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="100px">
          <el-input v-model="productForm.desciption" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" label-width="100px">
          <el-input v-model="productForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存" label-width="100px">
          <el-input v-model="productForm.stock" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="cid"   style="margin-left: 30px;">
          <el-select v-model="productForm.cid" placeholder="请选择商品分类">
              <el-option
              v-for="item in productDict"
              :key="item.cid"
              :label="item.cname"
              :value="item.cid"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProduct">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {listProduct,listProductDict,addOrEditProduct,delProduct} from "@/api/product"
export default {
  data() {
    return {
      tableData: [], // 表格数据
      searchText: '', // 查询框内容
      queryParams: {
      pname: '' // 初始化时，name查询参数为空
    },
      dialogVisible: false, // 对话框显示状态
      dialogTitle: '', // 对话框标题
      productForm: { // 商品表单
        pid: null,
        pname: '',
        desciption: '',
        price: '',
        stock: '',
        cid: ''
      },
      productDict:[]
    };
  },
  created() {
    this.fetchData();
    this.getProductDictData();
  },
  methods: {
    // 获取数据
    fetchData() {
      this.queryParams.pname = this.searchText;
      // 调用接口获取数据，这里使用假数据代替
      listProduct(this.queryParams).then(response => {
        this.tableData = response.data;
       
      });
    },
    getProductDictData(){
      listProductDict().then(response => {
            console.log(response)
          this.productDict = response.data;
        console.log(this.productDict)
        });
      },
    // 显示新增对话框
    showCreateDialog() {
      this.dialogTitle = '新增商品';
      this.productForm = { pid: null, pname: '', desciption: '', price: '', stock: '', cid: '' };
      this.dialogVisible = true;
    },
    // 显示修改对话框
    showEditDialog(product) {
      this.dialogTitle = '修改商品';
      this.productForm = { ...product };
      this.dialogVisible = true;
    },
    // 保存商品（新增或修改）
    saveProduct() {
      if (this.productForm.pid) {
        // 调用接口修改商品
        addOrEditProduct(this.productForm).then(response => {
          
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.dialogVisible = false;
        this.fetchData();
        });
      } else {  
        // 调用接口新增商品
        addOrEditProduct(this.productForm).then(response => {
          this.$message({
            message: '新增成功',
            type: 'success'
          });
          this.dialogVisible = false;
          this.fetchData();
        });
      }
      
    },
    confirmDelete(pid) {
      this.$confirm('确定要删除这项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用接口删除产品
        this.deleteProduct(pid);
      }).catch(() => {
        // 用户点击取消，不做任何操作
      });
    },
   // 删除商品
   deleteProduct(pid) {
    delProduct(pid).then(() => {
        this.fetchData();
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }).catch(error => {
        console.error('删除失败', error);
        this.$message.error('删除失败');
      });
    },
  }
}
</script>

